<style>
    .yw-search input {
        padding-right: 100px;
    }

    .yw-search button {
        position: absolute;
        top: 0;
        right: 0;
    }
</style>
<div class="layui-tab layui-tab-brief tool-tab" lay-filter="tool-tab">
    <ul class="layui-tab-title text-center">
        <li class="layui-this">{$tool_info.title}</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div class="layui-row">
                <div class="layui-col-sm12 layui-col-md8 layui-col-md-offset2">
                    <form action="">
                        <div class="yw-search">
                            <input type="text" name="qq" value="569349741" class="layui-input"
                                   placeholder="请输入要查询的QQ号码">
                            <button type="button" class="layui-btn layui-btn-normal"><i
                                        class="layui-icon layui-icon-search"></i> 获取
                            </button>
                        </div>
                    </form>
                    <div class="layui-card">
                        <div class="layui-card-header">
                            返回结果
                        </div>
                        <div class="layui-card-body" id="show_rs">
                            <div class="layui-row layui-col-space10">
                                <div class="layui-col-sm3 layui-col-md4 text-right">
                                    <img id="touxiang" src="" style="width: 72px;" />
                                </div>
                                <div class="layui-col-sm9 layui-col-md8">
                                    <p>QQ：<span id="qq"></span></p>
                                    <p>昵称：<span id="nickname"></span></p>
                                    <p>E-mail：<span id="email"></span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['jquery', 'layer'], function () {
        var $ = layui.jquery,
            l = layui.layer;

        $('.yw-search button').on('click', function () {
            var load = layer.load(2);
            $.post('__API__/qqinfo?qq='+$('input[name="qq"]').val(), function (rs) {
                layer.close(load);
                if (rs.code === 1001) {
                    var data = rs.data;
                    $('#touxiang').attr('src',data.touxiang);
                    $('#qq').html(data.QQ);
                    $('#nickname').html(data.nickname);
                    $('#email').html(data.email);
                } else {
                    layer.alert(rs.msg);
                }
            },
            'json');
        });

        $('.yw-search button').trigger('click');
    });
</script>